<template>
	<view>
		<view class="userItem">
			<view class="userAvatar">
				<image :src="avatarUrl" v-if="avatarUrl" mode="aspectFill"></image>
				<!-- <image v-else src="../../static/images/gugou/icon2.png"  mode="aspectFill"></image> -->
			</view>
			<view class="userName">
				<view class="name">
					{{name}}
				</view>
				<view class="groupName">
					<slot name="groupName"></slot>
				</view>
			</view>
			<view class="applicationBtn">
				<slot name="application"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"groupOrUserItem",
		props:['avatarUrl','name'],
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.userItem{
	display: flex;
	align-items: center;
	height: 120rpx;
	border-bottom: 1rpx solid #d5e8f0;
	.userAvatar{
		width: 100rpx;
		height: 100rpx;
		overflow: hidden;
		aspect-ratio: 1/1;
		border-radius: 50%;
		margin:0 30rpx;
		background-size: cover;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.userName{
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
		margin-left: 20rpx;
		font-size: 30rpx;
	}
}
</style>